<template>
  <div class="my-box">
      <div>Emit子组件看到的操作：</div><div> 
        --- <span>{{props.name}}</span> 
        --- <span>{{name}}</span>
       <button @click="changeName">更名</button></div>
  </div>
</template>
<script lang="ts" setup>
  // import { defineEmits, defineProps } from 'vue'
  // defineEmits和defineProps在<script setup>中自动可用，无需导入
  // 需在.eslintrc.js文件中【globals】下配置【defineEmits: true】、【defineProps: true】


// 声明props
const props = defineProps({
    name :{
        type: String,
        default: ''
    }
})

// 声明事件
const emit = defineEmits(['updateName'])

const changeName = () => {
    //执行 
    emit ('updateName','Jack')
}
</script>

<style scoped>
.my-box{
    display: flex;
}
  /* 支持CSS变量注入v-bind(color) */
</style>
